<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 
        css样式                         DOM样式
        width                              width
        color                              color
        -----------------------------------------------
        font-size                         fontSize

        //1. 设置样式
           只有一种方法
           节点对象.style.样式名=样式值 ;   // 加的行内样式  优先级较高


        //2.获取样式
           // 两种方法
         var stylevalue= 节点对象.style.样式名            只能取行内
          
        var stylevalue=  getComputedStyle(节点对象,null).样式名    行内和外部都可以得到
                                                如果伪类   null的地方改为伪类   ::before
     -->
    <div id="box"></div>
    <script>
       var box= document.querySelector('#box');
    //    box.style='background-color:red;border:1px solid blue'
    //    box.style='width:500px'
    
       //1.设置样式
        box.style.backgroundColor='red';
        box.style.border="10px solid orange";


        //2.获取样式
        // 取行内样式
       var bgc=  box.style.backgroundColor;
       console.log(bgc);//red

    //   var w= box.style.width;// 外部样式得不到
    //   console.log(w);
    // 行内和外部都可以得到
    console.log(getComputedStyle(box,null));
   var w= getComputedStyle(box,null).width;//300px
   console.log(w);

   var b= getComputedStyle(box,null).border;
   console.log(b);//10px solid rgb(255, 165, 0)

    </script>

</body>
</html>